/**
 * 根据工具条的左右位置和viewport的大小调整reader的位置和缩放比例
 */
 import { onMounted, onUnmounted } from 'vue';

 export default function useReaderResizer(readerContainer, toolbarPosition) {
  const calcReaderSize = () => {
    const toolbarWidth = 70;
    const headerHeight = 60;
    const margin = 10;
    const width = window.innerWidth - toolbarWidth - 2 * margin;
    const height = window.innerHeight - 2 * margin;
    if (width >= 960 && height >= 720) return {
      scale: 1, width: window.innerWidth - toolbarWidth, height: window.innerHeight - headerHeight
    };
    const scale = height / width > 0.75 ? width / 960 : height / 720;
    return {
      scale,
      width: (window.innerWidth - toolbarWidth) / scale,
      height: (window.innerHeight - headerHeight) / scale,
    };
  };
  const updateReaderSize = () => {
    if (!readerContainer.value) return;
    const left = toolbarPosition.value === 'left' ? '70px' : '0';
    const { scale, width, height } = calcReaderSize();
    readerContainer.value.style.transform = `scale(${scale})`;
    readerContainer.value.style.width = `${width}px`;
    readerContainer.value.style.height = `${height}px`;
    readerContainer.value.style.left = left;
  };

  onMounted(() => window.addEventListener('resize', updateReaderSize));
  onUnmounted(() => window.removeEventListener('resize', updateReaderSize));

  return {
    updateReaderSize,
  };
}